<template>
	<view class="capital-detail">
		<view class="header">
			<image class="logo" v-if="detailsData.funderLogo" :src="detailsData.funderLogo" mode=""></image>
			<image class="logo" v-else src="../../../../static/logo.png" mode=""></image>
			<view class="">{{detailsData.funderName}}</view>
		</view>

		<view class="content">
			<view class="info">
				<view class="address">
					<text class="mark"
						style="color: #0B4E9E;">{{detailsData.cityName=='市辖区'?`${detailsData.provinceName}区`:detailsData.cityName}}</text>
					<text>所在地</text>
				</view>

				<view class="capital">
					<text class="mark" style="color: #F57F17;">{{detailsData.loanAmount}}万元</text>
					<text>最高可融</text>
				</view>
				<view class="time">
					<text class="mark" style="color: #1B7AEF;">{{detailsData.loanPeriod}}</text>
					<text>期限许可</text>
				</view>
				<view class="type">
					<text class="mark"
						style="color: #C1816D;">{{detailsData.loanMethod==1?'股权融资':detailsData.loanMethod==2?'债权融资':'其他'}}</text>
					<text>出借类型</text>
				</view>
				<view class="rate" v-if="detailsData.loanMethod==1">
					<text class="mark" style="color: #E02020;">{{detailsData.incomeMethod}}</text>
					<text>收益方式</text>
				</view>
				<view class="rate" v-if="detailsData.loanMethod==2">
					<text class="mark" style="color: #E02020;">{{detailsData.incomeMethod}}</text>
					<text>资金利率</text>
				</view>
				<view class="way" v-if="detailsData.loanMethod==1">
					<text class="mark" style="color: #6236FF;">{{detailsData.exitMethod}}</text>
					<text>退出方式</text>
				</view>
				<view class="way" v-if="detailsData.loanMethod==2">
					<text class="mark" style="color: #6236FF;">{{detailsData.exitMethod}}</text>
					<text>还款方式</text>
				</view>
				<view class="way" v-if="detailsData.loanMethod==3">
					<text class="mark" style="color: #6236FF;">面议</text>
					<text>其他事项</text>
				</view>
			</view>

			<view class="card">
				<view class="card-titel">
					资方简介
				</view>
				<view class="">
					{{detailsData.funderIntroduction}}
				</view>
			</view>
			<view class="card">
				<view class="card-titel">
					资金属性
				</view>
				<view class="">{{detailsData.funderAttribute}}</view>
			</view>
			<view class="card">
				<view class="card-titel">
					资料要求清单
				</view>
				<view class="ul">
					{{detailsData.requestInformation}}
				</view>
			</view>
		</view>

		<view class="footer">
			<button type="primary" @click="back" class="back-btn">返回</button>
			<button type="primary" @click="submit">提出申请</button>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/findCapital.js';
	export default {
		data() {
			return {
				detailsData: '',
				funderId: '',
			}
		},
		onLoad(params) {
			if (params) {
				this.funderId = params.funderId
				this.getData()
			}
		},
		methods: {
			getData() {
				if (this.funderId) {
					api.getFrontDetail({
						funderId: this.funderId
					}).then(res => {
						this.detailsData = res.data
					})
				}
			},
			back() {
				uni.navigateBack()
			},
			submit() {
				uni.navigateTo({
					url: `CapitalApply?funderId=${this.funderId}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F6F6F6;
	}

	.capital-detail {

		.header {

			width: 100%;
			height: 272rpx;
			background-image: url(../../../../static/home_bg1.jpg);
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.logo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 4rpx;
				z-index: 10;
				margin-bottom: 20rpx;
			}

			view {
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				max-width: 80vw;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
			}
		}

		.content {
			padding: 24rpx;
			box-sizing: border-box;
			padding-bottom: 160rpx;

			.info {
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				border-radius: 8rpx;
				padding: 48rpx 0;
				overflow: hidden;

				>view {
					min-width: 33.333%;
					max-width: 33.33%;
					margin-bottom: 10rpx;
					text-align: center;
					box-sizing: border-box;
					border-right: 1rpx solid #D9DDE7;
					font-size: 28rpx;

					.mark {
						width: 100%;
						overflow: hidden;
						overflow: hidden; //超出的文本隐藏
						// text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
						font-size: 34rpx;
						margin-bottom: 10rpx;
						font-weight: 600;
					}

					text {
						display: block;
					}

					&:nth-child(3) {
						margin-bottom: 20rpx;
						border: 0;
					}

					&:nth-child(6) {
						border: 0;
					}
				}

			}

			.card {
				padding: 32rpx 24rpx;
				border-radius: 8rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-top: 24rpx;
				background-color: #FFFFFF;
				font-size: 28rpx;

				.card-titel {
					font-size: 32rpx;
					font-weight: 600;
					color: #000000;
					padding-left: 30rpx;
					position: relative;
					margin-bottom: 30rpx;


					&::after {
						content: '';
						display: block;
						width: 8rpx;
						height: 32rpx;
						background-color: #0B4E9E;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.ul {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.li {
						width: 50%;
						position: relative;
						padding-left: 20rpx;
						box-sizing: border-box;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
						margin-bottom: 20rpx;

						&::after {
							content: '';
							display: block;
							width: 8rpx;
							height: 8rpx;
							border-radius: 50%;
							background-color: #C1816D;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
		}

		.footer {
			box-sizing: border-box;
			width: 100%;
			display: flex;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 24rpx 0;
			border-top: 1rpx solid #f6f6f6;
			button {
				margin: auto;
				flex: auto;
				height: 80rpx;
				max-width: 200rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
				background-color: #0B4E9E;
			}
		}
	}
</style>
